<template>
	<view>
		<!-- 我的关注 -->
		<view class="bg-white p-4" style="width: 2000rpx;">
			<view class="flex font-md align-center">
				<view @click="selectActive(index)" class="p-2 px-4" :class="active==index?'active':''"
					v-for="(item,index) in navData" :key="index">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="p-2 flex flex-column" style="background-color: rgb(249,249,249);flex-wrap: wrap;">
				<view class="flex mb-3">
					<view class="flex align-center mr-4">
						<text>交易会:</text>
						<view class="ml-2 flex align-center px-2" style="border: 6rpx solid #eee;height: 60rpx;">
							<input style="width: 250rpx;" type="text">
						</view>
					</view>
					<view class="flex align-center mr-4">
						<text>专场:</text>
						<view class="ml-2 flex align-center px-2" style="border: 6rpx solid #eee;height: 60rpx;">
							<input style="width: 250rpx;" type="text">
						</view>
					</view>
					<view v-if="active==0" class="flex align-center mr-4">
						<text>标的号:</text>
						<view class="ml-2 flex align-center px-2" style="border: 6rpx solid #eee;height: 60rpx;">
							<input style="width: 200rpx;" type="text">
						</view>
					</view>
					<view class="flex align-center mr-4">
						<text>类型:</text>
						<view class="ml-2">
							<uni-data-select empty-text="暂无发票单号" placeholder="请选择类型" v-model="Selectvalue"
								:localdata="range" @change="change"></uni-data-select>
						</view>
					</view>
					<view class="flex">
						<view class="text-white bg-orange px-4 py-2 text-center mr-2" style="border-radius: 10rpx;">
							<text>查询</text>
						</view>
						<view class="text-white bg-orange px-4 py-2 text-center" style="border-radius: 10rpx;">
							<text>重置</text>
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<!-- 表格 -->
				<view class="mt-2 flex flex-column">
					<view class="w-100 flex font-sm font-weight-bold"
						style="background-color: rgb(245,245,245);height: 80rpx;">
						<view class="text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'4%;':'8%')">
							<label>
								<checkbox value="cb" />
							</label>
						</view>
						<view class="text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>序号</text>
						</view>
						<view v-if="active==0" class="text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>标的号</text>
						</view>
						<view v-else class="text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>专场名称</text>
						</view>
						<view v-if="active==1" class="text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>类型</text>
						</view>
						<view class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>所属交易会</text>
						</view>
						<view v-if="active==0" class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>所属专场</text>
						</view>
						<view v-else class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>交易会开始时间</text>
						</view>
						<view v-if="active==0" class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>品种</text>
						</view>
						<view v-if="active==0" class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>等级</text>
						</view>
						<view v-if="active==0" class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>数量(吨)</text>
						</view>
						<view v-if="active==0" class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>起拍价(元/吨)</text>
						</view>
						<view v-if="active==0" class=" text-center" style="line-height: 80rpx;"  :style="'width:' +(active==0?'8%;':'12%')">
							<text>成交价(元/吨)</text>
						</view>
						<view class=" text-center" style="line-height: 80rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>状态</text>
						</view>
						<view class=" text-center" style="width: 12%;line-height: 80rpx;" >
							<text>操作</text>
						</view>
					</view>
					<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
						暂无数据
					</view>
					<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
						v-for="(item,index) in 4" :key="index">
						<view class="text-center flex align-center justify-center" :style="'width:' +(active==0?'4%;':'8%')">
							<label>
								<checkbox value="cb" />
							</label>
						</view>
						<view class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>{{index+1}}</text>
						</view>
						<view v-if="active==0" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>31</text>
						</view>
						<view v-else class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>暂无名称</text>
						</view>
						<view v-if="active==0" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>31</text>
						</view>
						<view v-else class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>无</text>
						</view>
						<view v-if="active==1" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>啦啦啦交易会</text>
						</view>
						<view v-if="active==0" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>无</text>
						</view>
						<view v-else class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>暂无名称</text>
						</view>
						<view  v-if="active==0" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'16%')">
							<text>24kg大豆油</text>
						</view>
						<view  v-if="active==0" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>优</text>
						</view>
						<view  v-if="active==0" class=" flex justify-center align-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<text>100</text>
						</view>
						<view  v-if="active==0" class="flex align-center justify-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<view class="flex justify-center">
								<text class="text-orange">65</text>
							</view>
						</view>
						<view  v-if="active==0" class="flex align-center justify-center " style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<view class="flex justify-center w-100">
								<text class="text-ellipsis">100</text>
							</view>
						</view>
						<view class="flex align-center justify-center" style="line-height: 70rpx;" :style="'width:' +(active==0?'8%;':'12%')">
							<view class="flex justify-center">
								<text class="text-ellipsis">已完成</text>
							</view>
						</view>
						<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
							<button class="font-sm bg-success text-white flex justify-center align-center"
								style="white-space: nowrap; width: 100rpx;height: 100rpx;">查看</button>
							<button class="font-sm bg-danger text-white flex justify-center align-center"
								style="white-space: nowrap;width: 100rpx;height: 100rpx;">删除</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyConcern",
		data() {
			return {
				datetimerange: [],
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "采购"
					},
					{
						value: 2,
						text: "销售"
					},
				],
				range1: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "待交易"
					},
					{
						value: 2,
						text: "交易中"
					},
					{
						value: 3,
						text: "已成交"
					},
					{
						value: 4,
						text: "未成交"
					},
				],
				Selectvalue: '',
				active: 0,
				navData: [{
						name: '关注的标的',
					},
					{
						name: '关注的专场',
					},
				]
			};
		},
		methods: {
			selectActive(index) {
				this.active = index
			},
			change(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.active {
		color: #fc7c08;
		font-size: 40rpx;
		background-color: rgb(249, 249, 249);
		transition: all 0.5s;
	}
</style>